<template>
	<view>
		<view class="banner-content">
			<view class="banner-list">
				<u-swiper :list="videoList" keyName="pictureUrl" showTitle circular height="430rpx"
					@click="bannerClick"></u-swiper>
			</view>
		</view>
		<view class="list-content">
			<view class="list-search">
				<view class="search-types">
					<view :class="chooseClass(item.id)" v-for="item in types" :key="item.id" @click="chooseType(item)">
						{{item.value}}
					</view>
				</view>
				<view class="search-title">
					<view style="height: 50rpx;display: flex;justify-content: center;align-items: center;">标题：</view>
					<view style="width: 500rpx;">
						<u--input style="height: 50rpx;" v-model="queryParams.content" placeholder="请输入内容"
							fontSize="25rpx" shape="circle" clearable @change="inputChange()"></u--input>
					</view>
				</view>
			</view>
			<view class="item-value-contain">
				<view class="list-value">
					<view v-for="(item,index) in searchList" class="list-item" @click="jumpToUrl(item.jumpUrl)">
						<u--image :showLoading="true"
							:src="item.coverImg" width="340rpx"
							height="192rpx" radius="24rpx 24rpx 0 0"></u--image>
						<view class="item-content">
							{{item.content}}
						</view>
						<view class="item-foot">
							<view class="foot-writer">{{item.writerName}}</view>
							<view class="foot-date">{{item.publishTime}}</view>
						</view>
						<view :class="tagClass(item.videoType)">
							{{item.typeName}}
						</view>
					</view>
				</view>
				<view class="list-pagination" v-if="total>10">
					<uni-pagination :show-icon="true" :total="total" @change="changePage" />
				</view>
				
			</view>


		</view>

	</view>
</template>

<script>
	import {
		cmsBannerIndexList,
		findIndexPageList
	} from "@/api/page/blog";
	export default {
		data() {
			return {
				videoList: [],
				currentIndex: -1,
				types: [{
						id: -1,
						value: '全部'
					},
					{
						id: 0,
						value: '官拍'
					},
					{
						id: 1,
						value: '直拍'
					},
					{
						id: 2,
						value: '其他'
					}
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					videoType: null,
					content: ''
				},
				searchList: [],
				total:0
			}
		},
		mounted() {
			this.findBannerList()
			this.changeList()
		},
		methods: {
			findBannerList() {
				cmsBannerIndexList().then((response) => {
					this.videoList = []
					for (var i = 0; i < response.data.videoList.length; i++) {
						let data = response.data.videoList[i]
						data.title = response.data.videoList[i].content
						this.videoList.push(data)
					}
				})
			},
			bannerClick(index) {
				if (this.videoList[index].jumpUrl) {
					window.open(this.videoList[index].jumpUrl, "_blank");
				}
			},
			chooseClass(index) {
				if (this.currentIndex == index) {
					return 'type-item is-choose';
				} else {
					return 'type-item';
				}
			},
			tagClass(type){
				if(type==0){
					return "item-tag tag-background1";
				}else if(type==1){
					return "item-tag tag-background2";
				}else{
					return "item-tag tag-background3";
				}
				
			},
			chooseType(type) {
				this.currentIndex = type.id
				if (type.id === -1) {
					this.queryParams.videoType = null
				} else {
					this.queryParams.videoType = type.id
				}
				this.changeList()
			},
			changeList() {
				findIndexPageList(this.queryParams).then((response) => {
					this.searchList = [...response.rows]
					this.total=response.total
				})
				const element = document.querySelector(".item-value-contain");
				element.scrollTop = 0;
			},
			jumpToUrl(url) {
				window.open(url, "_blank");
			},
			inputChange() {
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.changeList()
			},
			changePage(e){
				this.queryParams.pageNum=e.current
				this.changeList()
			}

		}
	}
</script>

<style lang="scss">
	.banner-content {
		width: 750rpx;
		height: 480rpx;
		position: relative;
		background-color: white;

		// padding-bottom: 20rpx;
		.banner-list {
			width: 675rpx;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.list-content {
		width: 750rpx;
		position: relative;
		background-color: white;

		.list-search {
			width: 690rpx;
			height: 100rpx;
			margin-left: auto;
			margin-right: auto;
			font-family: "PingFang-SC";

			.search-types {
				width: 690rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.type-item {
					width: 100rpx;
					height: 50rpx;
					border-radius: 24rpx;
					border: 1px solid red;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FF2248;
				}

				.is-choose {
					background-color: #FF2248;
					color: #ffffff;
				}
			}

			.search-title {
				margin-top: 20rpx;
				width: 690rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 50rpx;
				display: flex;
				justify-content: start;
				align-items: center;

			}
		}

		.item-value-contain {
			margin-top: 50rpx;
			width: 750rpx;
			height: 760rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 20rpx;
			overflow: scroll;
			background-color: #f3f4f6;

			.list-value {
				width: 750rpx;
				min-height: 600rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-content: start;
				flex-wrap: wrap;

				.list-item {
					width: 340rpx;
					border-radius: 24rpx;
					margin-bottom: 30rpx;
					background-color: #ffffff;
					font-family: "PingFang-SC";
					position: relative;
					.item-tag{
						position: absolute;
						top: 0;
						left: 0;
						width: 80rpx;
						height: 40rpx;
						border-radius: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
					}
					
					.tag-background1{
						background-color: #21b0fc;
						opacity: 0.9;
						color: #ffffff;
					}
					.tag-background2{
						background-color: #FF2248;
						opacity: 0.8;
						color: #ffffff;
					}
					.tag-background3{
						background-color: #99a9bf;
						opacity: 0.9;
						color: #ffffff;
					}
					
					.item-content {
						width: 340rpx;
						height: 100rpx;
						padding-left: 10rpx;
						letter-spacing: 1rpx;
						padding-top: 10rpx;
						font-size: 25rpx;
						font-weight: 550;
						display: flex;
						justify-content: start;
						overflow: scroll;
					}

					.item-foot {
						width: 340rpx;
						height: 50rpx;
						padding: 10rpx;
						font-size: 35rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 15rpx;
						color: #a29ea0;

						.foot-writer {
							width: 240rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.foot-date {
							width: 100rpx;
							display: flex;
							justify-content: end;
						}
					}
				}
			}
			.list-pagination{
				width: 300rpx;
				margin-left: auto;
				margin-right: auto;
				height:fit-content;
				background-color: #ffffff;
			}
		}

	}
</style>